<template>
	<div>
		<el-header>
			<div class="left">
				<el-icon @click="handleCollapsed"><Menu /></el-icon>
				<span>企业门户网站管理系统</span>
			</div>
			<div class="right">
				<span>欢迎 Admin 回来</span>

				<el-dropdown>
					<span class="el-dropdown-link">
						<el-icon :size="30" color="white"><User /></el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="handleCenter"
								>个人资料</el-dropdown-item
							>
							<el-dropdown-item @click="handleCenter"
								>用户设置</el-dropdown-item
							>
							<el-dropdown-item divided @click="handleExit"
								>退出登录</el-dropdown-item
							>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</el-header>
	</div>
</template>

<script setup>
import { Menu, User } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const Store = useStore();
const Router = useRouter();

const handleCollapsed = () => {
	Store.commit("changeIsCollapsed");
};

const handleCenter = () => {
	Router.push("/center");
};

const handleSetting = () => {
	Router.push("/center");
};

const handleExit = () => {
	localStorage.removeItem("token");
	Router.push("/login");
};
</script>


<style lang="scss" scoped>
.el-header {
	background-color: #2d3a4b;
	color: white;
	width: 100%;
	height: 60px;
	line-height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.left,
.right {
	display: flex;
}

.left {
	i {
		margin: auto;
	}

	.el-icon {
		cursor: pointer;
	}

	span {
		margin-left: 8px;
	}
}

.right {
	.el-dropdown {
		margin: auto;
	}
	span {
		margin-right: 8px;
	}
}
</style>